<template>
  <view class="page-container">
    <GlobalTopBar ref="topBarRef" class="topbars fixed" :isLeft="true">
      <template #title><text>企业认证</text></template>
    </GlobalTopBar>
    <GlobalTopBar ref="topBarRef" :isLeft="true"> </GlobalTopBar>
    <view class="page_content">
      <image
        v-if="
          [undefined, 3, 2].includes(
            store.userInfo?.userEnterpriseCertificationInfo?.status,
          )
        "
        class="hztopimg"
        :src="`${store.imgDomain}hz_1.png`"
        mode="widthFix"
      />
      <!-- 相关信息 -->
      <view
        class="forms"
        v-if="
          [undefined, 3, 2].includes(
            store.userInfo?.userEnterpriseCertificationInfo?.status,
          )
        "
      >
        <view class="formsbox">
          <view
            class="wtf_box flex_center"
            v-if="store.userInfo?.userEnterpriseCertificationInfo?.status === 3"
          >
            <view class="flex" style="margin-bottom: 20rpx"
              ><image
                class="qy_1_img"
                :src="`${store.imgDomain}qy_1.png`"
                mode="widthFix"
              />
              <text class="t1">审核未通过</text>
            </view>

            <view class="t2">您提交的资料存在以下问题：</view>
            <view class="t3">
              <text style="color: #ff2e00">{{
                store.userInfo?.userEnterpriseCertificationInfo?.examine_desc
              }}</text
              >,请修改后再次提交
            </view>
          </view>

          <view class="titles flex">
            <image :src="`${store.imgDomain}hz_2.png`" mode="scaleToFill" />
            请填写相关信息
          </view>
          <!-- 填写内容 -->
          <view class="form_item border_b">
            <view class="label">公司名称：</view>
            <input
              class="inps"
              v-model="fromDttas.company_title"
              type="text"
              placeholder="请输入您的公司名称"
            />
          </view>
          <view class="form_item border_b">
            <view class="label">企业类型：</view>
            <picker @change="bindPickerChange" :range="selectList">
              <view class="select">
                <input
                  v-model="fromDttas.enterprise_type"
                  class="inps"
                  type="text"
                  disabled
                  placeholder="请选择企业类型"
                />
                <uni-icons type="right" size="18"></uni-icons>
              </view>
            </picker>
          </view>
          <view class="form_item border_b">
            <view class="label">联系人姓名：</view>
            <input
              class="inps"
              v-model="fromDttas.contact_name"
              type="text"
              placeholder="请输入联系人姓名"
            />
          </view>
          <view class="form_item border_b">
            <view class="label">联系电话：</view>
            <input
              class="inps"
              v-model="fromDttas.contact_phone"
              type="number"
              placeholder="请输入联系电话"
            />
          </view>
          <view class="form_item border_b">
            <view class="label flex"
              >营业执照：
              <button
                v-if="fromDttas.business_license_img"
                class="btnimg flex"
                @click="chooseImage"
              >
                <uni-icons
                  style="height: max-content; margin-right: 10rpx"
                  type="cloud-upload-filled"
                  size="20"
                  color="#6BBDFF"
                ></uni-icons>
                重新上传
              </button></view
            >
            <view class="flex">
              <template v-if="fromDttas.business_license_img">
                <image
                  class="business_license_img"
                  :src="fromDttas.business_license_img"
                  mode="aspectFill"
                />
              </template>

              <template v-else>
                <view class="imgsc flex_center" @click="chooseImage">
                  <uni-icons
                    type="plusempty"
                    size="30"
                    color="#999"
                  ></uni-icons>
                </view>
              </template>
            </view>
          </view>
          <view class="form_item">
            <view class="label">备注：</view>
            <textarea
              style="font-size: 24rpx"
              class="inps"
              v-model="fromDttas.remark"
              type="text"
              placeholder="请输入备注"
            />
          </view>
        </view>
      </view>

      <template
        v-else-if="
          store.userInfo?.userEnterpriseCertificationInfo?.status === 1
        "
      >
        <view class="flex_center shz">
          <view class="shbox flex_center">
            <image
              class="sh_img"
              :src="`${store.imgDomain}master_1.png`"
              mode="scaleToFill"
            />
            <text class="sh_text">等待审核</text>
            <view class="bm_text"
              >你的认证已提交，审核约需1-2个工作日，请等待审核。期间客服可能会联系你核实身份，请保持手机畅通。</view
            >
            <view class="btns" @click="store.to('/pages/home/index')"
              >返回首页</view
            >
          </view>
        </view>
        <!-- 文字 -->
        <view class="btext">
          <image :src="`${store.imgDomain}my_text.png`" mode="scaleToFill" />
        </view>
      </template>

      <template
        v-if="
          [undefined, 3, 2].includes(
            store.userInfo?.userEnterpriseCertificationInfo?.status,
          )
        "
      >
        <!-- 提示 -->
        <view class="ts">
          注意：<br />
          <view v-html="texts"></view>
        </view>
        <!-- 保存btn -->
        <view class="btns" @click="doSaveUserEnterpriseCertificationApply"
          >确定</view
        >
      </template>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, reactive } from 'vue';
import { useCounterStore } from '@/store';
import { onLaunch, onShow, onUnload } from '@dcloudio/uni-app';
import request from '@/utils/request';
import { validatePhone } from '@/utils/validate';

const store = useCounterStore();
const userInfo = ref({});
const selectList = ['有限责任公司', '个体工商户', '股份有限公司'];

// 参数
const fromDttas = reactive({
  id: '',
  company_title: '',
  enterprise_type: '',
  contact_name: '',
  contact_phone: '',
  business_license_img: '',
  remark: '',
  status: 1,
});
const texts = ref('');
const bindPickerChange = (e) => {
  fromDttas.enterprise_type = selectList[e.detail.value];
};

store.getParamValByKey('enterprise_certification_notice_text').then((res) => {
  console.log(999, res);

  texts.value = res.replace(/\n/g, '<br>');
  console.log(666, texts.value);
});

// 上传图
const chooseImage = () => {
  uni.chooseImage({
    count: 1, // 最多选择3张图片（默认9张）
    sourceType: ['album', 'camera'], // 可选择相册或相机（拍照）
    success: (res) => {
      console.log(666, res);

      onChooseAvatar(res.tempFilePaths[0]);
    },
    fail: (err) => {
      console.log('选择图片失败', err);
    },
  });
};

// 选择头像回调
const onChooseAvatar = (tempFilePaths) => {
  uni.uploadFile({
    url: 'https://adm.jinjiangservice.com/index.php/wxapp/common/uploadCommonImage',
    method: 'POST',
    filePath: tempFilePaths,
    formData: {
      file: tempFilePaths,
    },
    header: {
      'Content-Type': 'multipart/form-data',
    },
    name: 'file',
    success(res) {
      fromDttas.business_license_img = JSON.parse(res.data).data.path;
    },
    fail(err) {},
  });
};

// 提交企业认证申请
const doSaveUserEnterpriseCertificationApply = async () => {
  if (!fromDttas.company_title) {
    uni.showToast({
      title: '请输入公司名称',
      icon: 'none',
    });
    return;
  } else if (!fromDttas.enterprise_type) {
    uni.showToast({
      title: '请选择企业类型',
      icon: 'none',
    });
    return;
  } else if (!fromDttas.contact_name) {
    uni.showToast({
      title: '请输入联系人姓名',
      icon: 'none',
    });
    return;
  } else if (!validatePhone(fromDttas.contact_phone)) {
    uni.showToast({
      title: '请输入正确的联系电话',
      icon: 'none',
    });
    return;
  }
  // else if (!fromDttas.business_license_img) {
  //   uni.showToast({
  //     title: '请上传营业执照',
  //     icon: 'none',
  //   });
  //   return;
  // }
  await request(
    'wxapp/user/doSaveUserEnterpriseCertificationApply',
    fromDttas,
    'post',
  );
  store.userInfo.userEnterpriseCertificationInfo.status = 1;
};

onShow(() => {
  if (!store.userInfo.userEnterpriseCertificationInfo?.id) return;
  for (let key in fromDttas) {
    if (key != 'status') {
      fromDttas[key] = store.userInfo.userEnterpriseCertificationInfo[key];
    }
  }
});
</script>

<style lang="scss" scoped>
.topbars {
  background-color: #ffffff;
}
.page_content {
  position: relative;
  padding-bottom: 60rpx;
  .hztopimg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
  }
  .forms {
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    padding: 20rpx;
    margin-top: 200rpx;
    .formsbox {
      box-sizing: border-box;
      padding: 35rpx;
      background-color: #fff;
      border-radius: 20rpx;
      .titles {
        font-size: 32rpx;
        font-weight: 700;
        display: flex;
        align-items: center;
        margin-bottom: 20rpx;
        image {
          margin-right: 20rpx;
          width: 38rpx;
          height: 38rpx;
        }
      }
      .form_item {
        padding: 20rpx 0;

        .label {
          margin-bottom: 10rpx;
        }
        .select {
          display: flex;
          align-items: center;
          justify-content: space-between;
        }
      }
    }
  }
}
.ts {
  font-size: 24rpx;
  padding: 0 40rpx 20rpx;
  box-sizing: border-box;
  line-height: 40rpx;
}
.btns {
  margin: 0 auto;
  width: 90%;
  box-sizing: border-box;
  background-color: #0086f2;
  line-height: 80rpx;
  font-size: 30rpx;
  color: #fff;
  text-align: center;
  border-radius: 40rpx;
}
.btnimg {
  white-space: nowrap;
  margin: 0;
  margin-left: auto;
  width: 30%;
  line-height: 50rpx;
  text-align: center;
  color: #1481d8;
  font-size: 24rpx;
  border: 1rpx solid #6bbdff;
}
.imgsc {
  margin: 20rpx 0;
  width: 200rpx;
  height: 200rpx;
  border-radius: 20rpx;
  border: 1rpx dashed #999;
}
.business_license_img {
  width: 200rpx;
  height: 200rpx;
  border-radius: 20rpx;
  border: 1rpx solid #999;
}
.shz {
  width: 100%;
  box-sizing: border-box;
  padding: 20rpx;
  .centers_b {
    width: 100%;
    background-color: #fff;
    border-radius: 20rpx;
    border: 1rpx solid #0086f2;
    box-sizing: border-box;
    padding: 30rpx;
  }
}
.shbox {
  width: 100%;
  background-color: #fff;
  box-sizing: border-box;
  padding: 50rpx 20rpx;
  border-radius: 20rpx;
  flex-direction: column;
  border: 1rpx solid #0086f2;
  .sh_img {
    width: 127rpx;
    height: 127rpx;
    margin-bottom: 35rpx;
  }
  .sh_text {
    font-size: 36rpx;
    font-weight: 600;
    margin-bottom: 35rpx;
  }
  .bm_text {
    width: 80%;
    margin-bottom: 50rpx;
  }
  .btns {
    background-color: #0086f2;
    width: 85%;
    line-height: 70rpx;
    border-radius: 35rpx;
    color: #fff;
    text-align: center;
  }
}
.btext {
  position: relative;
  margin-top: 35rpx;
  display: flex;
  justify-content: center;
  &::after {
    content: ' ';
    width: 100rpx;
    height: 1rpx;
    position: absolute;
    top: 50%;
    left: 140rpx;
    transform: translateY(-50%);
    background-color: #73adff;
  }
  &::before {
    content: ' ';
    width: 100rpx;
    height: 1rpx;
    position: absolute;
    top: 50%;
    right: 140rpx;
    transform: translateY(-50%);
    background-color: #73adff;
  }
  image {
    position: relative;
    display: block;
    opacity: 0.6;
    width: 185rpx;
    height: 38rpx;
  }
}
.wtf_box {
  border-radius: 20rpx;
  background: linear-gradient(to bottom, #f7fbff, #e8f2ff);
  box-sizing: border-box;
  padding: 20rpx;
  flex-direction: column;
  margin-bottom: 20rpx;
  .qy_1_img {
    width: 44rpx;
    margin-right: 10rpx;
  }
  .t1 {
    font-size: 30rpx;
    font-weight: 700;
  }
}
</style>
